<template>
  <div class="userinf-container">
    <el-card class="app-container">
      <el-tabs v-model="activeName" @tab-click="handleClick" tab-position="left">
        <el-tab-pane label="个人详情" name="userInfo">
          <el-form label-width="140px" :rules="rules" ref="ruleForm" :model="userDetail">
            <!-- 工号 入职时间 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="工号">
                  <el-input disabled v-model="userDetail.workNumber" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入职时间">
                  <el-date-picker
                    v-model="userDetail.timeOfEntry"
                    disabled
                    type="date"
                    value-format="YYYY-MM-DD"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 姓名 部门 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="姓名" prop="username">
                  <el-input v-model="userDetail.username" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="部门" v-if="userDetail.departmentName">
                  <el-input disabled v-model="userDetail.departmentName" />
                </el-form-item>
              </el-col>
            </el-row>
            <!--手机 聘用形式  -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="手机" prop="mobile">
                  <el-input v-model="userDetail.mobile" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="聘用形式" v-if="userDetail.formOfEmployment">
                  <el-select v-model="userDetail.formOfEmployment">
                    <el-option
                      v-for="item in hireType"
                      :key="item.key"
                      :label="item.value"
                      :value="item.key"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 员工照片 -->
            <el-row class="inline-info">
              <el-col :span="12">
                <el-form-item label="头像" v-if="userDetail.staffPhoto != ''">
                  <img :src="userDetail.staffPhoto" alt="" class="icon" />
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 保存个人信息 -->
            <el-row class="inline-info" type="flex" justify="center">
              <el-col :span="12">
                <el-button type="primary" @click="saveUser">保存更新</el-button>
                <el-button @click="$router.back()">返回</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="postMag">
          <!-- ├─ post	string	非必须		岗位	
├─ rank	string	非必须		职级
├─ correctionEvaluation	string	非必须		转正评价
├─ hrbp	string	非必须		HRBP
─ socialRecruitment	string	非必须		社招校招 -->
          岗位：[{{ jobDetail.post }}] 职级：[{{ jobDetail.rank }}] 转正评价:[{{
            jobDetail.correctionEvaluation
          }}] 社招校招:[{{ jobDetail.socialRecruitment }}]</el-tab-pane
        >
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { getUserDetailById, saveUserDetailById, getEmployeesJobsById } from '@/api'
import { mapGetters } from 'vuex'
export default {
  name: 'userinfo',
  data() {
    return {
      activeName: 'userInfo',
      userDetail: {},
      jobDetail: {},
      hireType: [
        { key: 1, value: '正式' },
        { key: 2, value: '外包' },
      ], // 员工类型
      rules: {
        username: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '角色名称要求2-10个字符', trigger: 'blur' },
        ],
        mobile: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' },
        ],
      },
    }
  },
  async created() {
    // 根据id获取到用户数据
    const res1 = await getUserDetailById(this.userId)
    this.userDetail = res1.data
    const res2 = await getEmployeesJobsById(this.userId)
    this.jobDetail = res2.data
  },
  methods: {
    handleClick(e) {
      console.log(e)
    },
    saveUser() {
      // 满足条件验证 上传更新后的数据
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          const res = await saveUserDetailById(this.userDetail)
          if (res.success) {
            this.$message.success('更新个人数据成功')
            this.$router.back()
          }
        } else {
          return false
        }
      })
    },
  },
  computed: {
    ...mapGetters(['userId']),
  },
}
</script>

<style lang="less" scoped>
.icon {
  width: 300px;
}
</style>
